<template>
    <div class="payer" ref="payer">
      <marquee direction='up' loop height='148'>
      <div class="payer-list" ref="payerlist">
        <div v-for="(item,index) in payer" :key="index" class="avatar">
            <div class="user">
            <a-avatar :src="item.headimgurl" :size="49" />
            </div>
            <div class="info">
            <p class="elli">{{item.nickname}}</p>
            <p class="money">
                支付：
                <b class="num">￥{{item.money}}</b>
                <time>{{item.times.split(' ')[0]}}</time>
            </p>
            </div>
        </div>
      </div>
      </marquee>
    </div>
</template>

<script>
export default {
    props:['payer']
}
</script>

<style lang='less' scoped>
/* 付款用户 */

/deep/.ant-carousel  .slick-slide{
  height: 71px;
}
.payer{
  height: 148px;
  overflow: hidden;
  .payer-list{
    position: relative;
    transition: all 0.2s;
    .money{
      margin-top: 10px;
    }
  }
  .avatar {
    height: 69px;
    padding: 10px 10px;
    display: flex;
    display: -webkit-flex !important;
    display: -webkit-box !important;
    .user {
      width: 49px;
      margin-right: 10px;
    }
    .info {
      box-flex: 1;
      -webkit-box-flex: 1 !important;
      padding-top: 5px;
      .elli {
        min-height: auto;
        line-height: 16px;
      }
      p {
        text-align: left;
        margin-bottom: 0;
      }
      .money {
        .num{
          color: #ff4d4f;
        }
        time {
          float: right;
        }
      }
    }
  }
}
</style>